<template>
  <PageWrapper title="前后端部署触发">
    <template #headerContent>
      <!-- Use a-space for vertical layout -->
      <div class="download-container">
        <a-space direction="vertical" class="full-height-space">
          <a-button type="primary" @click="triggerDeploy('java')" :loading="loading.java" block>
            触发 Java 后端部署
          </a-button>

          <a-button type="primary" @click="triggerDeploy('web')" :loading="loading.web" block>
            触发 Web 前端部署
          </a-button>

          <!-- Ensure the card grows within the a-space flex container -->
          <a-card title="部署日志" class="log-card">
            <div class="log-container" ref="logContainerRef">
              <a-typography>
                <pre>{{ logContent }}</pre>
              </a-typography>
            </div>
          </a-card>
        </a-space>
      </div>
    </template>
  </PageWrapper>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, nextTick } from 'vue';
import { PageWrapper } from '/@/components/Page';
import { message } from 'ant-design-vue';
import axios from 'axios';
import dayjs from 'dayjs';

// 加载状态
const loading = reactive({
  java: false,
  web: false
});

// 日志内容
const logContent = ref<string>('等待部署操作...\n');
const logContainerRef = ref<HTMLElement | null>(null);

// 监听日志内容变化，自动滚动到底部
watch(logContent, async () => {
  await nextTick();
  if (logContainerRef.value) {
    logContainerRef.value.scrollTop = logContainerRef.value.scrollHeight;
  }
});

// 触发部署
const triggerDeploy = async (type: 'java' | 'web') => {
  try {
    loading[type] = true;
    logContent.value = `开始执行 ${type} 部署...\n`;

    const response = await axios.get(`/deploy_${type}`, {
      onDownloadProgress: (progressEvent) => {
        if (progressEvent.event?.currentTarget?.response) {
          logContent.value = progressEvent.event.currentTarget.response;
        }
      }
    });

    message.success(`${type} 部署触发成功`);
  } catch (error) {
    logContent.value += `\n部署过程中出现错误: ${error}\n`;
    message.error(`${type} 部署触发失败`);
  } finally {
    loading[type] = false;
  }
};
</script>

<style scoped>
.download-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  display: flex;
  /* Make this a flex container */
  flex-direction: column;
  /* Stack children vertically */
  height: 100%;
  /* Try to fill parent height */
  min-height: 0;
  /* Allow shrinking */
}

/* Style for the a-space component */
.full-height-space {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* flex-grow: 1; */
  /* Let space take natural height initially */
  /* min-height: 0; */
  /* Ensure the space itself can grow if its container allows */
  flex: 1 1 0%;
  /* Use flex shorthand to allow growing and shrinking */
  min-height: 0;
}

.log-card {
  flex-grow: 1;
  /* Allow card to grow */
  display: flex;
  /* Make card a flex container */
  flex-direction: column;
  /* Stack card content vertically */
  /* Prevent card from shrinking below its content */
  flex: 1 1 0%;
  min-height: 0;
}

/* Make the card body flexible and take up available space */
.log-card> :deep(.ant-card-body) {
  flex-grow: 1;
  /* Allow body to grow */
  display: flex;
  /* Make body a flex container */
  flex-direction: column;
  /* Stack content (log-container) vertically */
  padding: 0;
  /* Remove default padding */
  min-height: 0;
  /* Allow body to shrink */
}

.log-container {
  flex: 1 1 0%;
  width: 100%;
  overflow-y: auto;
  background-color: #000;
  color: #fff;
  padding: 12px;
  border-radius: 4px;
  font-family: monospace;
  white-space: pre-wrap;
  min-height: 150px;
  /* 最小高度 */
  max-height: 60vh;
  /* 最大高度 */
}

pre {
  margin: 0;
  font-family: inherit;
}
</style>